// pages/play/play.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    id: '',
    idList: [],
    wordIndex: 0,
    top: 0,
    playFlag: true,  //音乐播放标识
    nowTime: "00:00",//播放时间
    allTime: "04:31",//总时间
    nowDuration: 0,  //播放时间化为秒
    allDuration: 271,//总时间化为秒
    playStyle: 0,//歌曲播放形式的判断标识，0 列表循环 1  单曲循环 2  随机播放
    loopFlag: false,
    randomList: [],
    musicindex: 0,
    albumPic: '',
    songName: ''
  },

  //定义全局变量，没法在页面中使用，
  //但可以在js任意事件中使用,this.music
  music: '',

  
playOrPause: function () {
  //点击播放或暂停按钮是时，判断音乐播放状态
  //true播放  false暂停
  if(this.data.playFlag){
    this.music.play()//暂停
  }else{
    this.music.pause()//开始
  }
  //更改点击后的音乐状态
  this.setData({
    playFlag: !this.data.playFlag
  })
},
//请求歌曲数据
search: function () {
  var id = this.data.id
  wx.request({
    url: 'https://music.163.com/api/song/detail/?id=' + id + '&ids=[' + id + ']',
          success:(res) =>{
            // console.log(res.data)
            //歌曲总时长（秒）
            var songDuration =res.data.songs[0].duration
            //把毫秒转成整秒数
            var allDuration = Math.floor(songDuration/1000)
            //把秒数转为分秒
            var fen = Math.floor(allDuration/60)
            var miao = allDuration % 60
            fen = fen >= 10 ? fen : '0' + fen
            miao = miao >=10 ? miao : '0' + miao
            var allTime = fen + ":" + miao
            this.setData({
              // 歌曲名称
              songName: res.data.songs[0].name,
              // 歌曲专辑图片
              albumPic: res.data.songs[0].album.picUrl,
              // 歌曲总时长
              allDuration: allDuration,
              allTime: allTime
              // songDuration: res.data.songs[0].duration
            })
          }
  })
},
  sousuo: function () {
    wx.navigateTo({
      url: '/pages/playlist/playlist',
  })
  },
  timeUp: function (e) {
    //歌曲当前播放的时间
    var time = e.detail.currentTime
    var time1 = time
    //把时间转为整秒数
    time = Math.floor(time)
    //把秒数转为分秒
    var fen = Math.floor(time/60)
    var miao = time % 60
    fen = fen >=10 ? fen : '0' + fen
    miao = miao  >=10 ? miao : '0' + miao
    var nowTime = fen + ":" + miao
    this.setData({
      nowTime: nowTime,
      nowDuration: time
    })
    var wordArr = this.data.wordArr
    var index = 0
    var empty = 0 // 空白歌词的行数
    for(var i = 0; i < wordArr.length; i++){
      // 歌曲播放到最后一句话时，更改wordIndex
      if(time1 > wordArr[i][1] && i == wordArr.length - 1){
        index = i
        this.setData({
          wordIndex: index,
          top: (i - 8) * 30
        })
      }else if(time1 > wordArr[i][1] && time1 < wordArr[i+1][1] && i <= wordArr.length - 2){
        // 遍历0~i之间的歌词
        for(var j = 0; j <= i; j++){
          // 如果歌词为空，empty自增1
          if(wordArr[j][0] == ''){
            empty += 1
          }
        }
        // 判断当前歌词是否为空
        if(wordArr[i][0] == ''){
          // 歌词为空，就展示上一句歌词颜色变红
          index = i - 1
        }else{
          index = i
        }
        this.setData({
          wordIndex: index,
          // 去掉上方空歌词的高度，再去掉前8行的高度，最终算出需要滚动的高度
          top: (index - 8 - empty) * 30
        })
      }
    }
  },
  //拖动进度条
  timeSlide: function (e) {
    //进度条滑块所在点代表的秒数
    var num = e.detail.value
    this.music.pause()
    //歌曲要在对应的秒数播放
    this.music.seek(num)
    this.music.play()
    this.setData({
      playFlag: false
    })
  },
  topMusic: function () {
    var nowid = this.data.id * 1 // 数据隐式转换，id第一次进入是字符串类型，需要改为数字类型
    var randomList =this.data.randomList
    var idList = this.data.idList
    if(this.data.playStyle == 2){
      // 去除列表中第一个歌曲id
      randomList.shift()
      if(randomList.length <= 0){
        var index1 = idList.indexOf(nowid)
        // 如果当前歌曲是列表中最后一首歌，点击后播放第一首歌
        if(index1 == 0){
          var index2 = idList.length - 1
        }else{
          var index2 = index1 - 1
        }
        var nextId = idList[index2]
      }else{
        var nextId = randomList[0]
      }
    }else{
      // 获取当前歌曲在列表中的下标
      // indexOf()方法寻找数据返回下标时，需要数据类型保持一致
      var index1 = idList.indexOf(nowid)
      // 如果当前歌曲是列表中最后一首歌，点击后播放第一首歌
      if(index1 == 0){
        var index2 = idList.length - 1
      }else{
        var index2 = index1 - 1
      }
      var nextId = idList[index2]
    }
    // 更新歌曲id
    this.setData({
      id: nextId
    })
    // 请求新歌数据
    this.search()
    // 请求歌词
    this.searchWords()

    // 歌曲播放
    this.music.play()
    this.setData({
      playFlag: false
    })
  },
  //点击下一首
  nextMusic: function () {
    //数据隐式转换，id第一次为字符串类型，需转为数字
    var nowid = this.data.id * 1
    var idList = this.data.idList
    var randomList = this.data.randomList
    //获取当前歌曲在列表中的下标
    //indexOF()方法寻找数据返回下标时，需要数据类型保持一致
    var index1 = idList.indexOf(nowid)
    //判断随机播放的
    if(this.data.playStyle == 2){
      var length = idList.length
      //生成0-idList.length的随机整数
      var num = Math.floor(Math.random() * length)
      //下一首歌的id下标
      // var index2 = num == index1 ? num + 1 : num
      if(num == index1 && num == length-1){
        var index2 = 0
      }else if(num == index1 && index1 != length - 1){
        var index2 = index1 + 1
      }else{
        var index2 = num
      }
      //
      randomList.unshift(idList[index2])
    }else{
      //如果当前歌曲是列表中最后一首歌，点击下一首播放第一首歌
      if(index1 == idList.length - 1){
        var index2 = 0
      }else{
       var index2 = index1 + 1
      }
    }
    var nextId = idList[index2] 
    //更新歌曲id
    this.setData({
      id: nextId,
    })
    //请求数据
    this.search()
    // 请求歌词
    this.searchWords()
    //歌曲播放
    this.music.play()
    this.setData({
      playFlag: false
    })
  },
  errorMusic: function () {
    wx.showToast({
      title: '歌曲播放失败',
      icon: 'error',
      duration: 2000,
      success: () => {
        this.nextMusic()
      }
    })
  },
  //音乐播放结束
  musicEnd: function () {
    //单曲循环
    if(this.data.playStyle == 1){
      return
    }else{
      //列表循环//随机播放
      this.nextMusic()
    }
  },
  loop: function () {
    var num = this.data.playStyle
    // console.log(num);
    //如果playStyle属性值为1，loopFlag改为true 单曲循环
    this.setData({
      playStyle: (num + 1) % 3,
      loopFlag: (num + 1) % 3 == 1 ? true : false
    })
  },
  // 点击歌词从对应时间播放
  wordtap: function (e) {
    // 该行歌词播放的时间
    var time = e.currentTarget.dataset.time
    // 设置音乐播放时间
    this.music.seek(time)
  },

  // 请求歌词
  searchWords: function () {
    var id = this.data.id
    wx.request({
      url: 'https://music.163.com/api/song/lyric?os=pc&id=' + id + '&lv=-1&kv=-1&tv=-1',
      success: (res) => {
        // console.log(res.data)
        // lyric  字符串形式的歌词,每一句歌词都已换行符结尾
        var lyric = res.data.lrc.lyric
        // 通过split()方法把字符串分割为数组
        var lyricArr = lyric.split('\n')
        // console.log(lyricArr)
        // lyricArr 中数据格式： [00:00.000]歌词内容
        // 正则表达式设置时间格式
        // 薛之谦中时间格式固定： 00:00.000
        // 张杰中时间格式不固定:  00:00.000,00:00.0,00:00.00
        var part = /\[\d{1,2}:\d{1,2}\.\d{1,6}\]/
        // part含义： 00:00.0~000
        var wordArr = []   // 存歌词的空数组
        // 如果歌词最后一行为空，删除最后一行
        if(lyricArr[lyricArr.length - 1] == ''){
          lyricArr.pop()
        }
        // 数组的forEach((item,index,arr) => {})方法, 参数item代表遍历数组时的每一条数据，index代表遍历该条数据时的下标，arr代表正在遍历的数组
        lyricArr.forEach((item,index,arr) => {
          // 获取每一条歌词    replace(a,b)字符串替换方法，把字符串中a的内容去掉改为b的内容，part是所有符合这个形式的时间内容
          var word = item.replace(part, '')
          // console.log(word)
          // matc() 从字符串中提取符合正则表达式的内容,返回值是一个数组，提取的内容在数组第一个元素放置
          // time 的数据格式： '[00:00.000]'
          var time = item.match(part)[0]
          // slice(a,b)字符串截取 a:截取开始下标，b:截取终止下标
          time = time.slice(1,-1)  // '00:00.000'
          var timeArr = time.split(':') // [分钟数，秒数]
          var finalTime = timeArr[0] * 60 + timeArr[1] * 1 // 该条歌词演唱开始的时间点
          console.log(finalTime) 
          // wordArr.push([word, finalTime])
          if(word == '' || word == ' '){
            return
          }else{
            wordArr.push([word, finalTime])
          }
        });
        // console.log(wordArr) 
        this.setData({
          wordArr: wordArr
        })
      }
    })
  },
/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var id = options.id
    console.log(options.id);
    //收到的是字符串形式的数组
    var idList = options.idList ? JSON.parse(options.idList) : [1948119377,1950633235,1463165983,417859631,1332424898,1833633769,1412264741,28059417]
    var musicindex = options.musicindex
    // console.log(id)
    // console.log(idList);
    this.setData({
      id: id ? id : '28059417',
      idList:idList,
      musicindex: musicindex
    })
    //创建音乐标签实例，通过ID名找到页面中的audio标签
    this.music = wx.createAudioContext('music')
    this.search()
    this.searchWords()
    
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    wx.setStorage({
      data: this.data.idList,
      key: 'songIdList',
    }),
    console.log(this.data.idList);
    wx.setStorage({
      data: this.data.id,
      key: 'songId',
    }),
    wx.switchTab({
      url: '/pages/home/home?id=' + this.data.id + '&idList=' + this.data.idList + '&musicindex=' + this.data.musicindex,
    })
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})